<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="22">
          <el-form-item label="二级单位" prop="departmentOrgId">
            <treeselect :default-expand-level="1" v-model="form.departmentOrgId" :options="deptOptions"
              :show-count="true" placeholder="请选择二级单位" size="small" class="form_long" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="所属专业类" prop="professionalCategory">
            <!-- <el-input v-model="form.professionalCategory" placeholder="请输入所属专业类" class="form_long"/> -->
            <el-select v-model="form.professionalCategory" placeholder="请选择所属专业类">
              <el-option v-for="dict in professionalCategoryOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人工号" prop="projectOwnerId">
            <el-input v-model="form.projectOwnerId" placeholder="请输入工号" type="string" size="small" class="form_short"
              @blur="searchUser" @keyup.enter.native="searchUser" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="负责人姓名">
            <el-input v-model="form.projectLeader" placeholder="输入工号自动填写" disabled class="form_short" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人职称">
            <el-input v-model="form.ownerTitle" placeholder="输入职称" class="form_short" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="负责人电话" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入联系电话" class="form_short" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人邮箱" prop="ownerEmail">
            <el-input v-model="form.ownerEmail" placeholder="请输入邮箱" class="form_short" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="联系人工号" prop="projectContactId">
            <el-input v-model="form.projectContactId" placeholder="请输入工号" type="string" size="small" class="form_short"
              @blur="searchContactUser" @keyup.enter.native="searchContactUser" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="联系人姓名" prop="projectContactLeader">
            <el-input v-model="form.projectContactLeader" placeholder="输入工号自动填写" disabled class="form_short" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="联系人职称" prop="projectContactTitle">
            <el-input v-model="form.projectContactTitle" placeholder="请输入职称" class="form_short" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="联系人电话" prop="projectContactPhone">
            <el-input v-model="form.projectContactPhone" placeholder="请输入联系人电话" class="form_short" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="联系人邮箱" prop="projectContactEmail">
            <el-input v-model="form.projectContactEmail" placeholder="请输入联系人邮箱" class="form_short" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="合作企业" prop="cooperativeEnterprise">
            <el-input v-model="form.cooperativeEnterprise" placeholder="请输入内容合作企业" class="form_short" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="网址链接" prop="urlLink">
            <el-input v-model="form.urlLink" placeholder="请输入网址链接" class="form_short" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="选题要求" prop="selectionRequirements">
            <el-select v-model="form.selectionRequirements" placeholder="请选择选题要求" class="form_long">
              <el-option v-for="dict in selectionRequirementsOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue"></el-option>
            </el-select>
            <!-- <el-input v-model="form.selectionRequirements"    placeholder="请输入选题要求" class="form_long"/> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.selectionRequirements=='0'">
        <el-col :span="22">
          <el-form-item label="选题要求描述" prop="selectionRequirementsDesc">
            <el-input v-model="form.selectionRequirementsDesc" type="textarea" rows="3" placeholder="请输入选题要求描述"
              class="form_long" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>
<script>
  import { searchEmployee } from "@/api/labdata/employee";
  import { treeselect } from "@/api/labdata/orgnization";
  import Treeselect from "@riophae/vue-treeselect";
  export default {
    name: "ProjectTeachingCultivation",
    components: { Treeselect },
    data() {
      return {
        // 所属专业分类
        professionalCategoryOptions: [],
        //选题要求
        selectionRequirementsOptions: [],
        // 部门树选项
        deptOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
            { required: true, message: "工(学)号不能为空", trigger: "blur" }
          ],
          ownerPhone: [
            { required: true, message: "联系电话不能为空", trigger: "blur" }
          ],
          siteLocation: [
            { required: true, message: "实验室场地位置不能为空", trigger: "blur" }
          ],
          ownerEmail: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          projectContactEmail: [
            { message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          contactPhone: [
            { required: true, message: '请输入电话', trigger: 'blur' },
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
              message: '请输入正确的手机号码或者座机号',
            }
          ],
          projectContactPhone: [
            { message: '请输入电话', trigger: 'blur' },
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
              message: '请输入正确的手机号码或者座机号',
            }
          ],

        }
      };
    },
    props: {
      teachingCultivation: Object,
    },
    created() {
      this.getTreeselect();
      this.getDicts("selection_requirements").then(response => {
        this.selectionRequirementsOptions = response.data;
      });
      this.getDicts("majorOpt").then(response => {
        this.professionalCategoryOptions = response.data;
      });
      if (this.teachingCultivation) {
        this.form = this.teachingCultivation;
        this.searchUser();
        this.searchContactUser();
      } else {
        this.form = {};
      }
    },
    methods: {
      getTeachingCultivation() {
        return this.form;
      },

      // 输入工号搜索
      searchUser() {
        if (!this.form.projectOwnerId) {
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
        searchEmployee(this.form.projectOwnerId).then(response => {
          let searchResult = response.data;
          if (searchResult) {
            this.form.projectLeader = searchResult.nickName;
            this.form.ownerTitle = searchResult.title
          } else {
            this.form.projectLeader = null;
            this.form.ownerTitle = null;
          }
          //强制刷新
          this.$forceUpdate();
        });
      },

      // 输入联系人工号搜索
      searchContactUser() {
        if (!this.form.projectContactId) {
          this.form.projectContactLeader = null;
          this.form.projectContactTitle = null;
          return;
        }
        searchEmployee(this.form.projectContactId).then(response => {
          let searchResult = response.data;
          if (searchResult) {
            this.form.projectContactLeader = searchResult.nickName;
            this.form.projectContactTitle = searchResult.title
          } else {
            this.form.projectContactLeader = null;
            this.form.projectContactTitle = null;
          }
          //强制刷新
          this.$forceUpdate();
        });
      },

      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

    }

  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
</style>